<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <title>Title</title>
</head>
<body>

<div class="container">
    <div class="jumbotron">
        <h1>nav tabs automation</h1>
    </div>

    <div class="row">
        <div class="col-sm-2">

            <!-- Nav tabs -->
            <ul class="nav nav-tabs flex-column">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
                </li>
            </ul>

            <!-- Tab panes -->
<!--            <div class="tab-content">-->
<!--                <div class="tab-pane active container" id="home">1</div>-->
<!--                <div class="tab-pane container" id="menu1">2</div>-->
<!--                <div class="tab-pane container" id="menu2">3</div>-->
<!--            </div>-->

        </div>
        <div class="col-sm-10">

            <h2>hello</h2>
            <p>some info</p>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active container" id="home">
                    1
                    <p>home content</p>
                </div>
                <div class="tab-pane container" id="menu1">
                    2
                    <p>menu1 content</p>
                </div>
                <div class="tab-pane container" id="menu2">
                    3
                    <p>menu2 content</p>
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-sm-2">

            <!-- Nav tabs -->
            <ul class="nav nav-tabs flex-column">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#home2">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#menu2_1">Menu 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#menu2_2">Menu 2</a>
                </li>
            </ul>

            <!-- Tab panes -->
            <!--            <div class="tab-content">-->
            <!--                <div class="tab-pane active container" id="home">1</div>-->
            <!--                <div class="tab-pane container" id="menu1">2</div>-->
            <!--                <div class="tab-pane container" id="menu2">3</div>-->
            <!--            </div>-->

        </div>
        <div class="col-sm-10">

            <h2>hello</h2>
            <p>some info</p>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane fade active container" id="home2">
                    1
                    <p>home content</p>
                </div>
                <div class="tab-pane fade container" id="menu2_1">
                    2
                    <p>menu1 content</p>
                </div>
                <div class="tab-pane fade container" id="menu2_2">
                    3
                    <p>menu2 content</p>
                </div>
            </div>

        </div>
    </div>
</div>

</body>
</html>
